<template>
    <div class="video-wrapper">
        <iframe ref="vimeoPlayer" :src="videoUrl" frameborder="0"
            allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media"
            style="position:absolute;top:0;left:0;width:100%;height:100%;background-color: black;" title="视频2">
        </iframe>
    </div>
</template>
  
<script>
export default {
    name: 'VimeoPlayer',
    props: {
        videoUrl: {
            type: String,
            required: true
        }
    },
    mounted() {
        if (!document.getElementById('vimeo-player-api')) {
            const script = document.createElement('script');
            script.id = 'vimeo-player-api';
            script.src = 'https://player.vimeo.com/api/player.js';
            script.onload = this.initPlayer;
            document.body.appendChild(script);
        } else {
            this.initPlayer();
        }
    },
    methods: {
        initPlayer() {
            if (!window.Vimeo || !this.$refs.vimeoPlayer) return;

            const player = new window.Vimeo.Player(this.$refs.vimeoPlayer);

            player.on('play', () => {
                console.log('Video is playing');
            });

            player.on('ended', () => {
                console.log('Video ended');
            });
        }
    }
};
</script>
  
<style>
.video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
  